import { style } from '@vanilla-extract/css';
import { darkColor } from '../../theme/colors/colorDark.css';
import { lightColor } from '../../theme/colors/colorLight.css';
import { brighten, fallBackGlobalStyle, modifyHSLColorLightness } from '../../theme/tools';
import { vars } from '../../theme/vars.css';
import { CELL_PADDING } from './inputUtils';

export const cellStyle = style({
	position: 'relative',
	outline: 'none',
	textAlign: 'center',
	verticalAlign: 'middle',
	wordBreak: 'break-all',
	padding: CELL_PADDING,
	selectors: {
		'&:focus-within': {
			backgroundColor: brighten(vars.color.selection, 0.15),
			// boxShadow: `inset 0 1px 2px ${vars.color.accent},inset 0 -1px 2px ${vars.color.accent}`,
		},
	},
});

fallBackGlobalStyle(
	`${cellStyle}:focus-within`,
	{
		backgroundColor: modifyHSLColorLightness(lightColor.color.selection, 0.15),
	},
	{
		backgroundColor: modifyHSLColorLightness(darkColor.color.selection, -0.15),
	},
);
